Popup で番号ロックのGUIを作る
Web制作で言うところのModal
PopUp
PopUp.popup()メソッドで呼び出されるまで表示されないControl アイテム
エディタのシーンツリーに追加しても、デフォルトでvisibleがfalse
trueにすると見えるようになるが、実行時はpopup()をしないと見えないと警告が出る
NinePatchRect
Textureを9分割して、
4隅は不変
上下/左右は、1方向だけ伸縮
真ん中は制限なく伸びる
とすることで、崩れないUIアイテムを作成する。
https://gyazo.com/55aff670f64cce03b72e6ffa789ade5f https://gyazo.com/55b5a94aefaf297c30b0311e987747f7
左 : Patch Margin 未適用
右 : 上下左右の Patch Margin が 10px
NumberPadのイメージ
作ろうとするUIのスケッチを書いてみることは重要
https://gyazo.com/76e359cfea798aad6801cf2517326615
上 : Text
下 : Button
垂直の分割 を持つ要素は、
VBoxContainer
VSplitContainer
で作る。
Control の Thema機能
Controlには、子要素全てに適用される Thema というプロパティがある
1. rootのPopupを選択
2. Inspector > Theme > 新規Theme
3. Themeをクリック
4. 下のタブで編集
Theme.Default Font
特に、フォントを統一したいと言うのはよくある願望
(というか、最初はThemeの機能がFontの統一しかない)
1. Default Font > 新規Dynamic Font > .ttf
2.
AddClassItem to Theme
クラスアイテムをテーマに追加すると、Button や Label のデフォルトの見た目を変更できる。
https://gyazo.com/f8c24dd1757170517471e0466a900e0c
Themeの項目に、Buttonが追加された
新規StyleBoxTexture
Button の見た目を決めるテクスチャリソース
Theme > Button > Styles
から設定する。
normal
hover
pressed
ただし、このリソースをクリックして編集しようとすると、前のinspector画面に戻るので、
メニュー > 保存 > ファイルシステムから開く
メニュー > 編集
のどちらかから編集する。
VBoxContainer.customConstants
separation
Vboxの要素を、指定pxだけ離す
GridContainer
指定要素をグリッド状に並べる
折返しはColumnで設定
Buttonのフォントだけ変える
Displayと同じだと少し大きい
PopUp.Theme.Button に新規DynamicFont、thinがついてるやつの18pxにする
GridLayout.customConstraints
Vseparation / Hseparation
グリッド要素の縦横を開ける間隔
8pxずつ開けとく